<template>
  <view class="page">
    <view class="content">
      <view class="content-flex">
        <view>提现方式</view>
        <view class="blue-line" @click="handleWithdrawType">
          <view class="select" :class="withdrawName ? 'select-text' : ''">{{
            withdrawName ? withdrawName : "请选择"
          }}</view>
          <image class="drop" src="/static/images/drop.png"></image>
        </view>
      </view>
      <view class="mt-40">提现金额</view>

      <view class="input">
        <text class="input-text">￥</text>
        <input type="text" class="input1" v-model="withdrawalAmount" />
      </view>
      <view class="all">
        <view class="all-pirce">最多可提现金额：¥{{ balance }}</view>
        <view class="all-text" @click="withdrawAll">全部提现</view>
      </view>
      <view class="withdraw-account">
        <text class="input-text">提现账号名称：</text>
        <input
          type="text"
          class="input1"
          v-model="accountName"
          placeholder="请输入提现账号名称"
        />
      </view>
      <view class="withdraw-account">
        <text class="input-text">提现账号：</text>
        <input
          type="text"
          class="input1"
          v-model="accountNumber"
          placeholder="请输入提现账号"
        />
      </view>
      <view class="btn" @click="submit">提现</view>
    </view>
    <view class="describe">提现说明</view>
    <view class="describe1">
      <!-- <view>1、提现手续费1%</view> -->
      <view>1、提现申请后预计将在三个工作日内将款项发放至您提供的账号中</view>
      <view>2、提现手续费0.8%</view>
    </view>

    <uni-popup
      ref="popup"
      background-color="rgba(0,0,0,0)"
      :safeArea="false"
      type="bottom"
    >
      <view class="popup-content">
        <view class="popup-title">选择提现方式</view>
        <view
          class="popup-item"
          v-for="(item, index) in withdrawTypeList"
          :key="index"
          @click="checkWithdrawType(item)"
        >
          <view class="popup-flex">
            <image class="item-img2" :src="item.img"></image>
            <view>{{ item.name }}</view>
          </view>
          <image
            v-if="item.mode == withdrawType"
            class="right"
            src="../../static/images/detail/activechoose.png"
            mode=""
          ></image>
          <image
            v-else
            class="right"
            src="../../static/images/detail/circle.png"
            mode=""
          ></image>
        </view>
        <!-- 绑定银行卡 暂未使用 -->
        <!-- <view
          class="popup-item mb-200"
          @click="pageTo('/subPages/promotion/addBankCard')"
        >
          <view class="popup-flex">
            <image class="item-img" src="/static/images/cash/3.png"></image>
            <view>使用新卡提现</view>
          </view>
          <image class="item-img3" src="/static/images/drop.png"></image>
        </view> -->
      </view>
    </uni-popup>
  </view>
</template>

<script>
import payApi from "@/api/pay";

export default {
  name: "Withdraw",
  components: {},
  data() {
    return {
      balance: "", // 余额
      withdrawType: null, // 提现方式
      withdrawName: "", // 提现方式名称
      withdrawTypeList: [
        // {
        //   mode: 1, // 支付宝
        //   name: "支付宝",
        //   img: "../../static/images/confirmOrder/zfb.png",
        // },
        {
          mode: 2, // 银行卡
          name: "银行卡",
          img: "../../static/images/confirmOrder/yhk.png",
        },
      ],
      withdrawalAmount: "", // 提现金额
      accountName: "", // 提现账号名称
      accountNumber: "", // 提现账号
    };
  },
  onLoad(options) {
    this.balance = options.balance;
	this.getName()
  },
  onShow() {},
  methods: {
	  getName(){
		  payApi.dictName().then((res) => {
		    if (res.code == 200) {
			this.withdrawTypeList[0].name = res.data.dictValue
		    }
		  });
	  },
    // 打开提现方式
    handleWithdrawType() {
      this.$refs.popup.open();
    },
    // 切换提现方式
    checkWithdrawType(item) {
      if (this.withdrawType == item.mode) return;
      this.withdrawType = item.mode;
      this.withdrawName = item.name;
      this.$refs.popup.close();
    },
    // 全部提现
    withdrawAll() {
      this.withdrawalAmount = this.balance;
    },
    submit() {
      if (this.withdrawType == null) {
        uni.showToast({
          title: "请选择提现方式",
          icon: "none",
        });
        return;
      }
      if (this.withdrawalAmount == "") {
        uni.showToast({
          title: "请输入提现金额",
          icon: "none",
        });
        return;
      }
      if (Number(this.withdrawalAmount) < 1) {
        uni.showToast({
          title: "提现金额不能小于1元",
          icon: "none",
        });
        return;
      }
      if (this.accountName == "") {
        uni.showToast({
          title: "请输入提现账号名称",
          icon: "none",
        });
        return;
      }
      if (this.accountNumber == "") {
        uni.showToast({
          title: "请输入提现账号",
          icon: "none",
        });
        return;
      }
      let data = {
        topupAmount: this.withdrawalAmount,
        name: this.accountName,
        mode: this.withdrawType,
        accountNumber: this.accountNumber,
      };
      payApi.withdrawal(data).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "您的提现申请已发送，预计在三个工作日内到账，请您耐心等待！",
            icon: "none",
          });
          setTimeout(() => {
          uni.navigateBack();
          }, 1500);
        }
      });
    },
    // pageTo(url) {
    //   uni.navigateTo({
    //     url: url,
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 28rpx;
}

.content {
  width: 694rpx;
  // height: 522rpx;
  flex-shrink: 0;
  border-radius: 24rpx;
  background: #fff;
  padding: 40rpx 30rpx;

  .content-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .blue-line {
    display: flex;
    align-items: center;
  }

  .drop {
    width: 40rpx;
    height: 40rpx;
    margin-left: 12rpx;
  }

  .select {
    color: #000000;
    text-align: right;
    font-family: "PingFang SC";
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 40rpx;
    opacity: 0.5;
  }

  .select-text {
    opacity: 1;
  }
}

.input {
  width: 634rpx;
  height: 80rpx;
  border-bottom: 2rpx solid #f0f0f0;
  margin-top: 60rpx;
  display: flex;

  .input-text {
    margin-right: 10rpx;
    color: #000000;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 60rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 60rpx;
  }

  .input1 {
    height: 80rpx;
    width: 100%;
    font-size: 32rpx;
  }
}

.mt-40 {
  margin-top: 40rpx;
}

.all {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0 40rpx 0;

  .all-pirce {
    color: #000000;
    font-family: "PingFang SC";
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 0.5;
  }

  .all-text {
    color: #ff4254;
    text-align: right;
    font-family: "PingFang SC";
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}

.withdraw-account {
  display: flex;
  align-items: center;
  margin: 40rpx 0;

  input {
    flex: 1;
  }
}

.btn {
  width: 634rpx;
  height: 88rpx;
  flex-shrink: 0;
  border-radius: 24rpx;
  background: #ff4254;
  color: #ffffff;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.describe {
  color: #000000;
  font-family: "PingFang SC";
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 40rpx;
  margin: 40rpx 0 20rpx 0;
}

.describe1 {
  width: 694rpx;
  color: #000000;
  font-family: "PingFang SC";
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 44rpx;
  opacity: 0.5;
}

.popup-content {
  height: 600rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  background: #fff;
  padding-bottom: 34rpx;
  padding-top: 30rpx;

  .popup-title {
    color: #000000;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 34rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 0.9;
  }

  .popup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rpx 40rpx;
    height: 44rpx;
    margin-top: 80rpx;
  }

  .item-img {
    width: 38.5rpx;
    height: 33rpx;
    margin-right: 22rpx;
  }

  .item-img1 {
    width: 32rpx;
    height: 32rpx;
  }

  .item-img2 {
    width: 36.83rpx;
    height: 38.21rpx;
    margin-right: 22rpx;
  }

  .item-img3 {
    width: 40rpx;
    height: 40rpx;
  }

  .popup-flex {
    display: flex;
    align-items: center;
  }

  .right {
    width: 40rpx;
    height: 40rpx;
  }
}

.mb-200 {
  margin-bottom: 200rpx;
}
</style>
